<template>
	<view class="community-item">
		<view class="community-header" @click="handleUserClick(detail?.userId)">
			<view style="position: relative;width: 74rpx;height: 80rpx;display: flex;justify-content: center;">
				<image class="community-img" style="margin-top: 6rpx;" mode="aspectFill" :src="detail.userHeadPic" />
				<image v-if="detail.vipOrNot" style="position: absolute;top:0;left: 0;width: 74rpx;height: 80rpx;" src="https://static.wddzq.com/static/V3/shequtouxiangkuang.png" />
			</view>
			<view class="community-info">
				<view class="community-name">
					<view :class="detail.vipOrNot ? 'vip' : ''">{{detail.userNickName}}</view>
					<image v-if="detail.vipOrNot" class="community-tag" src="https://static.wddzq.com/static/V3/aiwanxiaofendui.png" />
				</view>
				<view class="community-time">{{detail.createDate}}</view>
			</view>
		</view>
		<!-- <view class="community-title">浙江杭州亚运会距离开始倒计时：108天</view> -->
		<view class="community-content">{{detail.content}}</view>
		<view class="community-img-box">
			<image mode="aspectFill" v-for="(it, index) in (detail.picListV2?.split('|') || [])" :key="index" :src="it" :class="[0,3,6].includes(index) ? '' : 'ml-8'" :style="{width: imageWidth + 'rpx', height: imageWidth + 'rpx'}" @click="handleImagePreview(detail.picListV2, index)" />
		</view>
		<view class="tag-list">
			<view class="tag-item" v-for="(it, index) in (detail.tagVoList || [])" :key="index">#{{it.tagName}}</view>
		</view>
		<view class="commit-cell">
			<view class="commit-data">{{detail.lookCount}}人浏览</view>
			<view class="commit-opts">
				<view class="commit-opts-item" @click="fetchCommitUserDiDi(detail.userId)">
				  <image src="https://static.wddzq.com/static/V3/DD-xuanzhong.png"></image>&nbsp;
				  <text>DD</text>
				</view>
				<view class="commit-opts-item" @click="fetchCommitDynamicGood(detail.id)">
				  <image v-if="detail.goodOrNot" src="https://static.wddzq.com/static/V3/dianzan-xuanzhong.png"></image>&nbsp;
				  <image v-else src="https://static.wddzq.com/static/V3/dianzan-weixuanzhong.png"></image>&nbsp;
					<text>{{detail.goodCount}}</text>
				</view>
				<view class="commit-opts-item">
				  <image src="https://static.wddzq.com/static/V3/pinglun.png"></image>&nbsp;
				  <text>{{detail.commentCount}}</text>
				</view>
				<view v-if="detail.myself" class="commit-opts-item" @click="handleDelete(detail.id)">
				  <image src="https://static.wddzq.com/static/V3/delete-outlined.png"></image>
				</view>
			</view>
		</view>
		<input :focus="focusDynamicId === detail.id ? focus : false" type="text" confirm-type="评论"  :auto-blur="false" :data-id="detail.id" :confirm-hold="true" :value="inputText" @input="handleInput" @blur="handleBlur" @confirm="handleConfirm(detail.id)" :placeholder="replyComment ?  '@' + replyComment.commentUserNickName : '点击评价'" style="font-size: 26rpx;color: #999999;border-radius: 18rpx;height: 80rpx;padding: 0 24rpx;background-color: #eee;" placeholder-style="font-size: 26rpx;color: #999999;font-weight: 400;" />
		<view class="comment-list" v-if="detail.commentVoList?.length > 0">
			<view class="comment-item" v-for="it in detail.commentVoList">
				<text class="comment-item-name" @click="handleCommentClick(it, detail.id)">{{it.commentUserNickName}}{{it.replyUserNickName ? ` 回复 ${it.replyUserNickName}` : ''}}: </text>
				<text class="comment-item-text" @click="handleCommentClick(it, detail.id)">{{it.commentContent}}</text>
				<image v-if="it.myself" src="https://static.wddzq.com/static/V3/delete-outlined.png" style="width: 36rpx;height: 36rpx;" @click="handleDeleteCommit(it.id, item.id)" />
			</view>
		</view>
	</view>
</template>

<script>
	import { commitDynamicComment, getDynamicsDetail, commitUserDiDi, commitDynamicGood, deleteDynamic, deleteDynamicComment } from '../../config/api.js';
	import { to, uploadAfter, pxToRpx, getSystemInfo, } from '../../config/utils.js';
	export default {
		data() {
			return {
				id: '',
				// 当前聚焦的输入框所在动态的id
				focusDynamicId: '',
				// 当前回复的某条评论
				replyComment: '',
				// 当前输入框文本
				inputText: '',
				focus: false,
				detail: {},
				imageWidth: 80,
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			let system = getSystemInfo();
			if(system) {
				let screenWidth = pxToRpx(system.screenWidth || 320);
				this.imageWidth = Math.floor((screenWidth - 100 - 16)/3);
			}
			this.fetDynamicsDetail(this.id);
		},
		methods: {
			handleImagePreview(urls, index) {
				uni.previewImage({
					current: index,
					urls: urls.split('|')
				})
			},
			// 删除动态
			async handleDelete(dynamicId, index) {
				let isDel = await this.showModal();
				if(!isDel) return;
				
				const [err, data] = await to(deleteDynamic({ dynamicId }))
				if(err) {
					return uni.showToast({
						title: err?.msg || '删除动态失败',
						icon: 'none'
					})
				}
				uni.showToast({
					title: err?.msg || '删除动态成功',
					icon: 'none'
				})
				uni.setStorageSync('__commit_success', '1');
				uni.navigateBack();
				// let _dynamicsList = [...dynamicsList];
				// _dynamicsList.splice(index, 1);
				// this.dynamicsList = _dynamicsList;
			},
			async handleDeleteCommit(commentId, dynamicId) {
				let isDel = await this.showModal();
				if(!isDel) return;
				
				const [err, data] = await to(deleteDynamicComment({ commentId }))
				if(err) {
					return uni.showToast({
						title: err?.msg || '删除评论成功',
						icon: 'none'
					})
				}
				this.fetDynamicsDetail(dynamicId);
			},
			showModal() {
				return new Promise(resolve => {
					uni.showModal({
						title: '确认删除？',
						success: function (res) {
							if (res.confirm) {
								resolve(true);
							} else if (res.cancel) {
								resolve(false);
							}
						}
					});
				})
			},
			handleUserClick(userId) {
				uni.navigateTo({
					url: '/pages/personal/personal?userId=' + userId
				})
			},
			handleCommentClick(replyComment, dynamicId) {
				if(replyComment) {
					this.focus = true;
					
					setTimeout(() => {
						this.replyComment = replyComment;
						this.focusDynamicId = dynamicId;
					}, 300)
				}
			},
			// 评论
			async handleConfirm(dynamicId, replyComment) {
				if(!this.inputText) {
					return uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					})
				}
				
				let params = {
					dynamicId,
					replyCommentId: this.replyComment?.id,
					commentContent: this.inputText
				};
				const [err, data] = await to(commitDynamicComment(params));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || '评论失败',
						icon: 'none'
					})
				}
				
				this.inputText = '';
				this.focusDynamicId = '';
				this.replyComment = '';
				this.fetDynamicsDetail(dynamicId);
				
				uni.showToast({
					title: '评论成功',
					icon: 'none'
				})
			},
			handleInput(e) {
				this.focusDynamicId = e.currentTarget.dataset.id;
				this.inputText = e.detail.value;
			},
			handleBlur() {
				this.focusDynamicId = '';
				this.inputText = '';
				this.replyComment = '';
				this.focus = false;
			},
			// 获取评论详情
			async fetDynamicsDetail(id) {
				let params = {
					dynamicId: id,
				};
				const [err, data] = await to(getDynamicsDetail(params));
				
				if(err) return;
				
				console.log(data)
				this.detail = data?.data || {};
			},
			
			//点赞
			async fetchCommitDynamicGood(id) {
				let params = {
					dynamicId: id
				};
				
				const [err, data] = await to(commitDynamicGood(params));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || '发送失败',
						icon: 'none'
					})
				};
				
				const _detail = {...this.detail};
				if(_detail.goodOrNot) {
					_detail.goodCount = (_detail.goodCount || 0) - 1;
				} else {
					_detail.goodCount = (_detail.goodCount || 0) + 1;
				}
				_detail.goodOrNot = !_detail.goodOrNot;
				this.detail = _detail;
			},
			// 发送DIDI
			async fetchCommitUserDiDi(userId) {
				let params = {
					userId: userId
				};
				
				const [err, data] = await to(commitUserDiDi(params));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || '操作失败'
					})
				};
				
				uni.showToast({
					title: data?.data || '发送成功',
					icon: 'none'
				})
			},
		}
	}
</script>

<style>

.community {
	padding: 0 24rpx;
}
.community-item {
	background: #FFFFFF;
	border-radius: 18rpx;
	padding: 32rpx 26rpx;
}
.community-item .community-header {
	display: flex;
	align-items: center;
}

.community-header .community-img {
	width: 66rpx;
	height: 66rpx;
	border-radius: 40rpx;
}
.community-header .community-info {
	margin-left: 10rpx;
}

.community-info .community-name {
	display: flex;
	height: 42rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #333333;
	line-height: 42rpx;
}
.community-info .community-name view {
	margin-right: 8rpx;
}
.community-info .community-name view.vip {
	color: #FF6F0A;
}
.community-info .community-name .community-tag {
	width: 143rpx;
	height: 44rpx;
}

.community-info .community-time {
	height: 30rpx;
	font-size: 22rpx;
	font-weight: 400;
	color: #999999;
	line-height: 30rpx;
}

.community-title {
	height: 36rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 36rpx;
	margin-top: 16rpx;
	margin-bottom: 8rpx;

}
.community-content {
	font-size: 28rpx;
	font-weight: 400;
	color: #666666;
	line-height: 36rpx;
	margin-bottom: 16rpx;
	margin-top: 20rpx;
}
.community-img-box {
	display: flex;
	flex-wrap: wrap;
}
.community-img-box image {
	/* flex: 1; */
	height: 210rpx;
	border-radius: 18rpx;
	margin-bottom: 8rpx;
}

.tag-list {
	margin: 24rpx 0;
	display: flex;
	flex-wrap: wrap;
}
.tag-item {
	height: 48rpx;
	background: #F7F7F7;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16rpx;
	margin-bottom: 10rpx;
	
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	padding: 0 16rpx;
}

.commit-cell {
	display: flex;
	align-items: center;
	margin-bottom: 25rpx;
}
.commit-cell .commit-data {
	height: 34rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #999999;
	line-height: 34rpx;
}
.commit-cell .commit-opts {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.commit-opts .commit-opts-item {
	display: flex;
	align-items: center;
	margin-left: 40rpx;
}
.commit-opts-item image {
	width: 32rpx;
	height: 32rpx;
}
.commit-opts-item text {
	height: 36rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #999999;
	line-height: 36rpx;
}

.comment-list {
	background-color: #f2f2f2;
	border-radius: 18rpx;
	padding: 20rpx;
	margin-top: 25rpx;
}
.comment-list .comment-item {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}
.comment-item .comment-item-name {
	font-size: 28rpx;
	color: #999;
}
.comment-item .comment-item-text {
	font-size: 28rpx;
	color: #333;
	flex: 1;
	padding: 0 12rpx;
}

.ml-8 {
	margin-left: 8rpx;
}
</style>
